

<template>


  <div class="card" style="margin-bottom: 10px">
    <el-input style="width: 300px; margin-right: 10px" v-model="data.username" placeholder="请输入学号查询" :prefix-icon="Search"/>
    <el-input style="width: 300px" v-model="data.phone" placeholder="请输入手机号查询" :prefix-icon="Search"/>
    <el-button type="primary" style="margin-left: 10px" @click="load" >查询</el-button>
    <el-button type="info"  @click="reset">重置</el-button>


  </div>
  <div class="card"  style="margin-bottom: 10px">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <span style="padding-left: 40%">用户管理</span>
  </div>

  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="username" label="学号" width="120" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="name" label="名称" width="120" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="email" label="邮箱" width="170" />
      <el-table-column prop="sex" label="性别" width="60" />
      <el-table-column prop="birth" label="生日" width="120" />
      <el-table-column prop="avatar" label="头像" width="100">
        <template #default="scope">
          <el-image v-if="scope.row.avatar" :src="scope.row.avatar"  style="width: 40px;height: 40px; border-radius: 5px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色" width="75" />
      <!--      <el-table-column必须加width不然会报错-->
      <el-table-column width="170">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="dele(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />


  </div>
  <div class="card"  style="margin-bottom: 10px">
    <span style="padding-left: 45%">超级用户</span>
  </div>

  <div class="card" style="margin-bottom: 10px">
    <el-table  :data="tableData1" style="width: 100%">

      <el-table-column prop="username" label="账号" width="400" />
      <el-table-column prop="password" label="密码" width="400" />
      <el-table-column prop="role" label="角色/用户等级" width="350" />
    </el-table>

  </div>
  <el-dialog width="35%" v-model="data.formVisible" title="学生信息">
    <el-form :model="data.form" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-form-item label="学号" >
        <el-input v-model="data.form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" >
        <el-input v-model="data.form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" >
        <el-input v-model="data.form.name " autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input v-model="data.form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="data.form.email" autocomplete="off" />
      </el-form-item>

      <el-form-item label="生日" >
        <el-date-picker style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  v-model="data.form.birth" ></el-date-picker>
      </el-form-item>
      <el-form-item  label="头像">
        <el-upload action="http://localhost:9999/upload" :show-file-list="true"  :on-success="handleImgUPloadSuccess" >
          <el-button style="margin-left: 10px"  type="primary">上传头像</el-button>
        </el-upload>

      </el-form-item>

    </el-form>
    <div style="margin-top: 20px;margin-bottom: 20px;">
      <span style="margin-left: 60px;">性别</span>
      <el-radio-group style=" margin-left: 20px; " v-model="data.form.sex " >
        <el-radio-button  label="boy" />
        <el-radio-button  label="girl" />
      </el-radio-group>
      <span style="margin-left: 30px;">角色</span>
      <el-radio-group style=" margin-left: 20px; " v-model="data.form.role " >
        <el-radio-button  label="Root" />
        <el-radio-button  label="Student" />
      </el-radio-group>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>


import {reactive} from "vue";
import {  Search } from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";


const data =reactive({
  id:'',
  username:'',
  phone:'',
  tableData:[],
  total: 0,
  pageSize: 6,
  pageNum: 1
})

const tableData1 = [
  {
    username: 'root',
    password: 'wjq191036',
    role: 'Root/最高级',
  }
]




const load = () =>{
  request.get('/manage/selectPage',{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      username:data.username,
      phone:data.phone,
      formVisible:false,
      form:{}

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0

  })


}


load()
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}

const reset = () =>{
  data.id = ''
  data.username = ''
  data.phone = ''
  load()
}


const handleAdd = () =>{
  data.form= {}
  //清空数据
  data.formVisible =true
  //打开弹窗

}


//编辑信息
//保存信息
const save =()=>{
  if (data.form.username==null | data.form.password==null | data.form.name==null | data.form.email==null | data.form.phone==null |data.form.role==null){
    ElMessage.error("输入不能为空")}
  else {
    request.request({
      url: data.form.id ? '/manage/update':'/manage/add',
      method: data.form.id ? 'PUT': 'POST',
      data:data.form

    }).then(res=>{

      if (res.data.code===1){
        //重新获取数据
        load()
        data.formVisible=false  //关闭弹窗
        ElMessage.success( "操作成功")

      }else {
        console.log(res)
        ElMessage .error("操作失败")
      }




    })

  }


}

const handleEdit =(row)=>{
  data.form =JSON.parse(JSON.stringify(row))//进行深层拷贝到form里
  data.formVisible =true//打开弹窗



}

const dele =(id)=>{
  //确认信息
  ElMessageBox.confirm('删除该数据后该数据无法恢复，您确定删除吗？','删除确认',{
    type:'warning'
  }).then(res=>{
    request.delete('/manage/delete/'+id).then(res=>{
      //记得加斜杆/delete/
      if (res.data.code===1){
        load()
        ElMessage.success( "操作成功")

      }else {
        console.log(res)
        ElMessage .error("操作失败")
      }
    })
  }).catch(() => {
    ElMessage({

      type: 'info',
      message: 'Delete canceled'
    })
  })

}



const handleImgUPloadSuccess = (res) =>{
  console.log(res)
  console.log(data.form.avatar)
  data.form.avatar=res.url

}




</script>






<style scoped>

</style>
